<?php
    echo $this->Html->script('bootstrap-modal.js');
    echo $this->Html->script('jquery.bpopup.min.js');
?>
<body>
    <div class="container">
        <nav class="barra-secundaria">
            <ul class="nav nav-tabs">
                <li class="">
                    <a href="<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'index')); ?>">Usuarios</a>
                </li>
                <li><a href="#">Perfiles</a></li>
                <li>
                    <a href="<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'tipos')); ?>">Perfiles</a>
                </li>
                
            </ul>
        </nav>
        <div class="bs-docs-example">
            <table class="table table-striped" id="tabla-tipos">
                <button class="btn btn-success agregar-modal" type="button" data-toggle="modal">
                    Agregar
                </button>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>Nombre</th>
                        <th>Descripcion</th>
                        <th>Permisos</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($tipos as $t) { ?>
                        <tr>
                            <td><?php echo $t['t']['id']; ?></td>
                            <td><?php echo $t['t']['nombre']; ?></td>
                            <td><?php echo $t['t']['descripcion']; ?></td>
                            <td>
                                <button class="btn btn-small btn btn-dark permisos-modal">Mostrar</button>
                            </td>
                            <td>
                                <button class="btn btn-small btn-primary modificar-modal" type="button" data-toggle="modal">
                                    Modificar
                                </button>
                                <button class="btn btn-small btn-danger eliminar-modal" type="button" data-toggle="modal">
                                    Eliminar
                                </button>
                            </td>
                        </tr>
                    <?php } ?>
                </tbody>
            </table>
            <div id="dialogo-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel"></h3>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="control-group">
                            <label class="control-label">Nombre</label>
                            <div class="controls">
                                <input type="text" id="nombre">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Descripcion</label>
                            <div class="controls">
                                <input type="text" id="descripcion">
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <button class="btn btn-inverse" id="permisos">Permisos</button>
                            </div>
                        </div>
                        
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
                    <button class="btn agregar-registro" id="boton-aceptar"></button>
                </div>
            </div>
            <div id="permisos-modal" class="dialogo-modal">
                <h3>Agregar/Quitar Permisos</h3>
                <table class="table table-striped" id="tabla-permisos">
                    <thead>
                        <tr>
                            <th>Numero</th>
                            <th></th>
                            <th>Nombre</th>
                            <th>Descripcion</th>
                        </tr>
                    </thead>
                    <tbody id="lista-permisos">
                         <tr>
                            <td><label class="control-label"></label></td> 
                            <td><input type="checkbox" class="check-permiso"></td>
                            <td><label class="control-label"></label></td>
                            <td><input type="text" readonly="true"></td>
                         </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary" id="aceptarPermisos">Aceptar</button>
                <button class="btn btn-success" id="cancelarPermisos">Cancelar</button>
            </div>
            <div id="permisos-modal2" class="dialogo-modal">
                <button type="button" class="close">×</button>
                <h3>Permisos</h3>
                <table class="table table-striped" id="tabla-permisos">
                    <thead>
                        <tr>
                            <th>Numero</th>
                            <th>Nombre</th>
                            <th>Descripcion</th>
                        </tr>
                    </thead>
                    <tbody id="lista-permisos">
                         <tr>
                            <td><label class="control-label"></label></td> 
                            <td><label class="control-label"></label></td>
                            <td><input type="text" readonly="true"></td>
                         </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary">Aceptar</button>
            </div>
        </div>
    </div>           
</body>
<script type="text/javascript">
    var rutaModificar = "<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'modificarTipo')); ?>";
    var rutaEliminar = "<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'eliminarTipo')); ?>";
    var rutaAgregar = "<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'agregarTipo')); ?>";
    var rutaPermisos = "<?php echo $this->Html->Url(array('controller' => 'Usuarios', 'action' => 'obtenPermisos')); ?>";
    var dialogo = $(document).find('#dialogo-modal');
    var datos,renglon;
    
    $(function() {
       $('#permisos-modal').hide();
       $('#permisos-modal2').hide();
       $('#permisos').bind('click', function(e) {
                e.preventDefault();
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: rutaPermisos,
                    data: {id : datos[0]}
                })
                .done(function(permisos) {  
                        $('#lista-permisos').html('');
                        permisos.forEach(function(p){
                        $('#lista-permisos').append("<tr><td><label class=\"control-label\">"+p['p']['id']+"</label></td><td><input type=\"checkbox\"></td><td><label class=\"control-label\">"+p['p']['nombre']+"</label></td><td><input class=\"descrip\" type=\"text\" readonly=\"true\"></td></tr>");
                        $('#lista-permisos tr:last .descrip').val(p['p']['descripcion']);
                    });
                });
                $('#permisos-modal').bPopup();
       });
       $('.permisos-modal').bind('click', function(e) {
                e.preventDefault();
                var id = $(this).parent().parent();
                id = id.find('td:first').html();
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: rutaPermisos,
                    data: {id : id}
                })
                .done(function(permisos) {  
                        $('#lista-permisos').html('');
                        permisos.forEach(function(p){
                        $('#lista-permisos').append("<tr><td><label class=\"control-label\">"+p['p']['id']+"</label></td><td><label class=\"control-label\">"+p['p']['nombre']+"</label></td><td><input class=\"descrip\" type=\"text\" readonly=\"true\"></td></tr>");
                        $('#lista-permisos tr:last .descrip').val(p['p']['descripcion']);
                    });
                });
                $('#permisos-modal2').bPopup();
       });
       $('.modificar-modal').click(function() {
           click_modi($(this));
       });
       $('.eliminar-modal').click(function() {
          click_eli($(this));
       });
       $('.agregar-modal').click(function() {
           click_agre();
       });
       $('#boton-aceptar').click(function() {
           dialogo.modal('hide');   
           if($(this).text()=='Agregar'){
               datos = new Array();
               datos[1] = dialogo.find('#nombre').val();
               datos[2] = dialogo.find('#descripcion').val();
               $.post(rutaAgregar,{datos : datos},agregar);
           }
           if($(this).text()=='Eliminar'){
               $.post(rutaEliminar,{datos : datos},eliminar);
           }
           if($(this).text()=='Guardar'){
//               datos = new Array(); 
               datos[1] = dialogo.find('#nombre').val();
               datos[2] = dialogo.find('#descripcion').val();
               $.post(rutaModificar,{datos : datos},modificar);
           }
       });
    });
   function click_eli(e){
        renglon = e.parent().parent();
        datos = new Array(renglon.find('td').eq(0).text(),
                         renglon.find('td').eq(1).text(),
                         renglon.find('td').eq(2).text());
        dialogo.find('#myModalLabel').text("¿Eliminar registro \" "+datos[0]+" \"?");
        dialogo.find('#nombre').val(datos[1]);
        dialogo.find('#descripcion').val(datos[2]);
        dialogo.find('#boton-aceptar').text('Eliminar');
        dialogo.modal('show');
   }
   function click_modi(e){
        renglon = e.parent().parent();
        datos = new Array(renglon.find('td').eq(0).text(),
                         renglon.find('td').eq(1).text(),
                         renglon.find('td').eq(2).text());
        dialogo.find('#myModalLabel').text("Modificar registro \" "+datos[0]+" \"");
        dialogo.find('#nombre').val(datos[1]);
        dialogo.find('#descripcion').val(datos[2]);
        dialogo.find('#boton-aceptar').text('Guardar');
        dialogo.modal('show');
   }
   function click_agre(){
        dialogo.find('#myModalLabel').text("Agregar registro");
        dialogo.find('#nombre').val('');
        dialogo.find('#descripcion').val('');
        dialogo.find('#boton-aceptar').text('Agregar');
        dialogo.modal('show');
   }
   function modificar(user) {
       renglon.find('td').eq(1).text(user['nombre']);
       renglon.find('td').eq(2).text(user['descripcion']);
    }
    function eliminar() {
       renglon.remove();
    }
    function agregar(permiso) {
        var elemento = $('#tabla-tipos tr:last');
        elemento.after("<tr></tr>");
        elemento = $('#tabla-tipos tr:last');
        elemento.append("<td></td><td></td><td></td><td></td>");
        elemento.find('td').eq(0).text(permiso['id']);
        elemento.find('td').eq(1).text(permiso['nombre']);
        elemento.find('td').eq(2).text(permiso['descripcion']); 
        elemento = $('#tabla-permisos tr:last td:last');
        elemento.append("<button class=\"btn btn-small btn-primary modificar-modal\" type=\"button\" data-toggle=\"modal\">\n\
                            Modificar\n\
                         </button>\n\
                         <button class=\"btn btn-small btn-danger eliminar-modal\" type=\"button\" data-toggle=\"modal\">\n\
                            Eliminar\n\n\
                         </button>");
        var botonmodificar = elemento.find('.modificar-modal');
        var botoneliminar  = elemento.find('.eliminar-modal');
        botoneliminar.click(function(){
            click_eli($(this));
        });
        botonmodificar.click(function(){
            click_modi($(this));
        });   
    }
</script>
